.footer {
  margin-top: 2rem;

  &__copyright {
    display: block;
    @include text();
    text-align: center;
    line-height: 4rem;

    span {
      color: crimson;
    }

    &:hover {
      color: initial;
    }

    a {
      color: inherit;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .logo {
    float: right;

    @include respond('as') {
      justify-content: center;
      margin-bottom: 1rem;
    }

    &--github {
      width: 4rem;
      height: 4rem;
      fill: blue;
    }
  }

  &__link {
    margin-left: 2rem;
    position: relative;

    &::before {
      content: '';
      display: inline-block;
      width: 3px;
      height: 3px;
      border-radius: 100%;
      background-color: white;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: -1.2rem;
    }
  }
}
